<template>
  <el-drawer
    :visible.sync="visibleDrawer"
    direction="rtl"
    :with-header="false"
    size="500px"
    :before-close="handleClose"
  >
    <div style="padding: 5px">
      <el-avatar :size="40" :src="`${avatar}?imageView2/1/w/80/h/80`"/>
      <el-form label-width="70px">
        <el-form-item label="用户名:">{{ row.username }}</el-form-item>
        <el-form-item label="昵称:">{{ row.nickname }}</el-form-item>
        <el-form-item label="手机号:">{{ row.phone }}</el-form-item>
        <el-form-item label="邮箱:">{{ row.email }}</el-form-item>
        <el-form-item label="角色:">{{ (row.roleNames || []).join('，\n') }}</el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import User from '@/api/entity/User'
import defaultAvatar from '@/assets/avatar.png'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: User,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {
    visibleDrawer: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    avatar() {
      return this.row.avatarUrl || defaultAvatar
    }
  },
  methods: {
    handleClose() {
      this.visibleDrawer = false
    }
  }
}
</script>
